<template>
  <SearchForm :query="query" @search="onSearch" @reset="handleReset" />

  <n-space class="py-[10px]" justify="end">
    <n-button
      ghost
      type="error"
      size="small"
      v-hasPermi="['system:post:remove']"
      :disabled="checkedRows.length === 0"
      @click="handleDeleteRows"
    >
      <template #icon>
        <n-icon size="18"><DeleteOutlineOutlined /></n-icon>
      </template>
      删除
    </n-button>

    <n-button
      ghost
      type="primary"
      size="small"
      v-hasPermi="['system:post:add']"
      @click="openDialog"
    >
      <template #icon>
        <n-icon size="18"><PlusRound /></n-icon>
      </template>
      新增
    </n-button>
  </n-space>

  <n-data-table
    ref="tableRef"
    :loading="loading"
    :columns="columns"
    :data="tableData"
    :row-key="(row: any) => row.postId"
    :pagination="{
      page: query.page,
      pageSize: query.pageSize,
      itemCount: total,
      showSizePicker: true,
      onUpdatePage: handlePageChange,
      onUpdatePageSize: handlePageSizeChange,
    }"
    @update:checked-row-keys="handleChcekedRowKeys"
  />

  <UpdatePostDialog :visible="visible" :data="data" @close="handleCloseDialog"></UpdatePostDialog>
</template>

<script setup lang="tsx">
import { ref } from 'vue';
import SearchForm from './components/SearchForm.vue';
import { useTable } from '@/hooks/useTable';
import { NButton, NIcon, NSpace, useMessage, useDialog as useConfirmDailog } from 'naive-ui';
import { DeleteOutlineOutlined, PlusRound } from '@vicons/material';
import UpdatePostDialog from './components/UpdatePostDialog.vue';
import { useDialog } from '@/hooks/useDialog';
import getColumns from './columns';
import { deletePosts, getPostList } from '@/apis/system/post';

defineOptions({ name: 'Post' });

const message = useMessage();
const dialog = useConfirmDailog();
const checkedRows = ref<any[]>([]);

const {
  query,
  tableData,
  total,
  loading,
  handleSearch,
  handleReset,
  handlePageChange,
  handlePageSizeChange,
} = useTable({
  api: getPostList,
  defaultQuery: {
    postCode: null,
    postName: null,
    status: null,
  },
});

const { visible, data, openDialog, closeDialog } = useDialog();

// 查询表单提交
const onSearch = (values: any) => {
  Object.assign(query, values);
  handleSearch();
};

/**
 * 关闭弹窗回调
 * @param params
 */
const handleCloseDialog = (params: any) => {
  if (params?.needRefresh) {
    handleSearch();
  }
  closeDialog();
};

async function handleDelete(rows: any[]) {
  try {
    const ids = rows.map((item: any) => item.postId).join(',');
    const res: any = await deletePosts(ids);
    if (res.code === 200) {
      message.success('删除成功');
      handleSearch();
    }
    return res;
  } catch (error) {}
}

const columns = getColumns(openDialog, handleDelete);

function handleChcekedRowKeys(keys: Array<string | number>, rows: object[]) {
  checkedRows.value = rows;
}

// 删除行
function handleDeleteRows() {
  const names = checkedRows.value.map((item: any) => item.postName).join(',');

  const dialogRef = dialog.warning({
    title: '删除角色',
    content: `确定要删除选中的 ${names} 岗位吗？`,
    positiveText: '确定',
    negativeText: '取消',
    onPositiveClick: async () => {
      dialogRef.loading = true;
      const res: any = await handleDelete(checkedRows.value);
      if (res.code === 200) {
        checkedRows.value = []; // reset选中状态
      }
      dialogRef.loading = false;
    },
  });
}
</script>

<style scoped lang="less"></style>
